<template>
    <div class="addGoods-container">
        <b-container class="bv-example-row row-box">
            <!-- 步骤条 -->
            <Steps :current="current">
                <Step title="求购商品信息" icon="ios-information-circle"></Step>
                <Step title="求购商品图片" icon="md-images"></Step>
                <Step title="发布求购商品" icon="ios-send"></Step>
            </Steps>
            <!-- 求购商品信息表单区域 -->
            <b-row class="my-goodsInfo">
                <b-col cols="12" sm="12" md="12" lg="12">
                    <div class="goodInfo">
                        <div class="tip-info">
                            <h5>求购商品图片</h5>
                            <p><Icon type="md-bulb" /> 裁剪区域可以通过鼠标滚轮调节背景图大小</p>
                            <p><Icon type="md-bulb" /> 封面和其他图片分开上传哦（图片大小默认400 * 300）</p>
                            <p><Icon type="md-bulb" /> 最多上传8张图片哦</p>
                        </div>
                        <Divider orientation="left">封面图片</Divider>
                        <!-- 封面图片列表 -->
                        <b-row class="img-list">
                            <b-col cols="6" sm="6" md="4" lg="2" v-for="(item,i) in imgList" :key="i">
                                <div class="img-item">
                                    <img :src="item.wgpAddress" alt="">
                                    <a href="javascript:void(0);" class="del"
                                    @click.prevent="del(item.wgpId, i)"><Icon type="md-trash" /></a>
                                </div>
                            </b-col>
                            <!-- 上传封面图片组件 -->
                            <b-col cols="6" sm="6" md="4" lg="2" v-if="imgList.length==0">
                                <div class="upload-file">
                                    <form enctype="multipart/form-data">
                                        <ImgCutter class="my-file"
                                            :boxWidth="700"
                                            :boxHeight="470"
                                            :cutWidth="380"
                                            :cutHeight="430"
                                            :sizeChange="false"
                                            v-on:cutDown="cutDown">
                                            <button slot="open">
                                                <Icon type="ios-cloud-upload" size="43" style="color: #3399ff"></Icon>
                                                <p>选择图片</p>
                                            </button>
                                        </ImgCutter>
                                    </form>
                                </div>
                            </b-col>
                        </b-row>
                        <Divider orientation="left">其他图片</Divider>
                        <!-- 其他图片列表 -->
                        <b-row class="img-list">
                            <b-col cols="6" sm="6" md="4" lg="2" v-for="(item,i) in otherImgList" :key="i">
                                <div class="img-item">
                                    <img :src="item.wgpAddress" alt="">
                                    <a href="javascript:void(0);" class="del"
                                    @click.prevent="delOther(item.wgpId, i)"><Icon type="md-trash" /></a>
                                </div>
                            </b-col>
                            <!-- 上传其他图片组件 -->
                            <b-col cols="6" sm="6" md="4" lg="2" v-if="otherImgList.length<=8">
                                <div class="upload-file">
                                    <form enctype="multipart/form-data">
                                        <ImgCutter class="my-file"
                                            :boxWidth="700"
                                            :boxHeight="470"
                                            :cutWidth="380"
                                            :cutHeight="430"
                                            :sizeChange="false"
                                            v-on:cutDown="cutDownOther">
                                            <button slot="open">
                                                <Icon type="ios-cloud-upload" size="43" style="color: #3399ff"></Icon>
                                                <p>选择图片</p>
                                            </button>
                                        </ImgCutter>
                                    </form>
                                </div>
                            </b-col>
                        </b-row>
                        <Button type="primary" @click="save">保存</Button>
                    </div>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>

// eslint-disable-next-line import/no-extraneous-dependencies
import ImgCutter from 'vue-img-cutter'

export default {
    name: 'updateWantGoodImgs',
    data() {
        return {
            current: 2,
            wgId: this.$route.params.wgId,
            imgList: [], // 封面图片
            otherImgList: [], // 其他图片
        }
    },
    created() {
        this.findMainPic()
        this.findOtherPic()
    },
    methods: {
        // 根据求购商品id查询此求购商品的主图封面
        findMainPic() {
            this.$axios({
                url: 'wantGoodsPicture/findMainPicByGoodsId/' + this.wgId,
                method: 'get',
            }).then(res => {
                if (res.data.code === 200) {
                    if (res.data.object != '') {
                        this.imgList.push({
                            wgpId: res.data.object.wgpId,
                            wgpAddress: res.data.object.wgpAddress,
                        })
                    }
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 根据求购商品Id查询此求购商品的其他图片
        findOtherPic() {
            this.$axios({
                url: 'wantGoodsPicture/findByGoodsId/' + this.wgId,
                method: 'get',
            }).then(res => {
                if (res.data.code === 200) {
                    if (res.data.list != '') {
                        res.data.list.forEach(item => {
                            if (item.wgpIsCover == 0) {
                                this.otherImgList.push({
                                    wgpId: item.wgpId,
                                    wgpAddress: item.wgpAddress,
                                })
                            }
                        })
                    }
                }
            }).catch(error => {
                console.log(error)
            })
        },
        // 点击裁剪封面图片确定按钮先上传图片到七牛云返回图片URL，然后新增图片
        cutDown(res) {
            const formData = new FormData()
            let file = res.file // 输出为file类型的文件对象
            formData.append('file', file)
            this.$axios({
                url: 'goodsPicture/saveImg',
                method: 'post',
                contentType: false,
                data: formData,
                processData: false,
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    // 得到图片url
                    console.log(res.data.object)
                    this.init(res.data.object)
                    let data = []
                    data.push({
                        wgpWgid: this.wgId,
                        wgpAddress: res.data.object,
                        wgpIsCover: 1,
                    })
                    // 新增封面图片
                    this.$axios({
                        url: 'wantGoodsPicture/save',
                        method: 'post',
                        dataType: 'json',
                        data: JSON.stringify(data),
                        headers: {
                            Authorization: localStorage.getItem('token'),
                            'Content-Type': 'application/json',
                        },
                    }).then(res => {
                        if (res.data.code === 200) {
                            console.log(res.data.msg)
                        }
                    })
                    .catch(error => {
                        console.log(error)
                    })
                }
            })
            .catch(error => {
                console.log(error)
            })
        },
        // 初始化图片数组
        init(img) {
            this.imgList.push({
                wgpId: 0,
                wgpAddress: img,
            })
        },
        // 删除封面图片指定图片
        del(id, i) {
            this.$axios({
                url: 'wantGoodsPicture/deleteById/' + id,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.imgList.splice(i, 1)
                }
            })
            .catch(error => {
                console.log(error)
            })
        },
        // 点击裁剪其他图片确定按钮先上传图片到七牛云返回图片URL，然后新增图片
        cutDownOther(res) {
            const formData = new FormData()
            let file = res.file // 输出为file类型的文件对象
            formData.append('file', file)
            this.$axios({
                url: 'goodsPicture/saveImg',
                method: 'post',
                contentType: false,
                data: formData,
                processData: false,
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    console.log(res.data.object)
                    this.initOther(res.data.object)
                    let data = []
                    data.push({
                        wgpWgid: this.wgId,
                        wgpAddress: res.data.object,
                        wgpIsCover: 0,
                    })
                    // 新增其他图片
                    this.$axios({
                        url: 'wantGoodsPicture/save',
                        method: 'post',
                        dataType: 'json',
                        data: JSON.stringify(data),
                        headers: {
                            Authorization: localStorage.getItem('token'),
                            'Content-Type': 'application/json',
                        },
                    }).then(res => {
                        if (res.data.code === 200) {
                            console.log(res.data.msg)
                        }
                    })
                    .catch(error => {
                        console.log(error)
                    })
                }
            })
            .catch(error => {
                console.log(error)
            })
        },
        // 初始化其他图片数组
        initOther(img) {
            this.otherImgList.push({
                wgpId: 0,
                wgpAddress: img,
            })
        },
        // 删除其他图片指定图片
        delOther(id, i) {
            this.$axios({
                url: 'wantGoodsPicture/deleteById/' + id,
                method: 'get',
                headers: {
                    Authorization: localStorage.getItem('token'),
                },
            }).then(res => {
                if (res.data.code === 200) {
                    this.otherImgList.splice(i, 1)
                }
            })
            .catch(error => {
                console.log(error)
            })
        },
        // 点击保存按钮根据求购图片id修改求购图片集
        save() {
            const data = [] // 求购图片对象数组
            data.push({
                wgpId: this.imgList[0].wgpId,
                wgpWgid: this.wgId,
                wgpAddress: this.imgList[0].wgpAddress,
                wgpIsCover: 1,
            })
            this.otherImgList.forEach(item => {
                data.push({
                    wgpId: item.wgpId,
                    wgpWgid: this.wgId,
                    wgpAddress: item.wgpAddress,
                    wgpIsCover: 0,
                })
            })
            this.$axios({
                url: 'wantGoodsPicture/updateById',
                method: 'post',
                dataType: 'json',
                data: JSON.stringify(data),
                headers: {
                    Authorization: localStorage.getItem('token'),
                    'Content-Type': 'application/json',
                },
            }).then(res => {
                if (res.data.code === 200) {
                    let curId = this.wgId
                    // 保存图片集成功跳转到商品详情页
                    this.$router.push({ name: 'wantGoodsInfo', params: { curId } })
                }
            }).catch(error => {
                console.log(error)
            })
        },
    },
    components: {
        ImgCutter,
    },
}
</script>
<style scoped>
.row-box{
    background: #fff;
    padding: 15px;
    margin-bottom: 15px;
}
.my-goodsInfo {
    margin-top: 20px;
}
.goodInfo {
    min-height: 440px;
    padding: 20px;
}
.tip-info {
    margin-bottom: 20px;
}
.btn-info {
    margin-top: 20px;
}
.img-item {
    width: 100%;
    height: 150px;
    border-radius: 10px;
    position: relative;
    margin-bottom: 15px;
}
.img-item img {
    width: 100%;
    height: 150px;
    border-radius: 10px;
}
.img-item a {
    display: block;
    padding: 1px 4px;
    font-size: 12px;
    border-radius: 5px;
    color:#fff;
    background-color: rgba(39, 39, 39, 0.3);
    position: absolute;
    top:5px;
    right:5px;
}
.upload-file {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 15px;
    border:1px solid #e0e0e0;
}
.my-file {
    width: 100%;
    height: 150px;
}
.my-file button {
    outline: 0;
    width: 100%;
    display: block;
    text-align: center;
    background: #fff;
    height: 150px;
    border-radius: 10px;
    cursor: pointer;
    border: none;
    font-size: 12px;
}
</style>
